Project Loon

Welcome to the datapage for Project Loon data! This dataset consists of 385 balloon flights, split into 938 data segments. For more details on the dataset, please see the About tab. On this page, we offer several tools to select and visualize data from individual balloons. The raw data can be viewed and downloaded from the Data tab, and the Analysis tab offers other data access and analysis tools. We’re currently working on more tools to visualize and access the data, so stay tuned!

Image from Wikipedia by Flickr user Wasting Frames, license CC BY 2.0.

---

function interval(range = [], options = {}) {
  const [min = 0, max = 1] = range;
  const {
    step = .001,
    label = null,
    value = [min, max],
    format = ([start, end]) => `${start} … ${end}`,
    color,
    width,
    theme,
    __ns__ = randomScope(),
  } = options;

  const css = `
#${__ns__} {
  font: 13px/1.2 var(--sans-serif);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  max-width: 100%;
  width: auto;
}
@media only screen and (min-width: 30em) {
  #${__ns__} {
    flex-wrap: nowrap;
    width: 360px;
  }
}
#${__ns__} .label {
  width: 120px;
  padding: 5px 0 4px 0;
  margin-right: 6.5px;
  flex-shrink: 0;
}
#${__ns__} .form {
  display: flex;
  width: 100%;
}
#${__ns__} .range {
  flex-shrink: 1;
  width: 100%;
}
#${__ns__} .range-slider {
  width: 100%;
}
  `;
  
  const $range = rangeInput({min, max, value: [value[0], value[1]], step, color, width, theme});
  const $output = html`<output>`;
  const $view = html`<div id=${__ns__}>
${label == null ? '' : html`<div class="label">${label}`}
<div class=form>
  <div class=range>
    ${$range}<div class=range-output>${$output}</div>
  </div>
</div>
${html`<style>${css}`}
  `;

  const update = () => {
    const content = format([$range.value[0], $range.value[1]]);
    if(typeof content === 'string') $output.value = content;
    else {
      while($output.lastChild) $output.lastChild.remove();
      $output.appendChild(content);
    }
  };
  $range.oninput = update;
  update();
  
  return Object.defineProperty($view, 'value', {
    get: () => $range.value,
    set: ([a, b]) => {
      $range.value = [a, b];
      update();
    },
  });
}

function rangeInput(options = {}) {
  const {
    min = 0,
    max = 100,
    step = 'any',
    value: defaultValue = [min, max],
    color,
    width,
    theme = theme_Flat,
  } = options;
  
  const controls = {};
  const scope = randomScope();
  const clamp = (a, b, v) => v < a ? a : v > b ? b : v;

  // Will be used to sanitize values while avoiding floating point issues.
  const input = html`<input type=range ${{min, max, step}}>`;
  
  const dom = html`<div class=${`${scope} range-slider`} style=${{
    color,
    width: cssLength(width),
  }}>
  ${controls.track = html`<div class="range-track">
    ${controls.zone = html`<div class="range-track-zone">
      ${controls.range = html`<div class="range-select" tabindex=0>
        ${controls.min = html`<div class="thumb thumb-min" tabindex=0>`}
        ${controls.max = html`<div class="thumb thumb-max" tabindex=0>`}
      `}
    `}
  `}
  ${html`<style>${theme.replace(/:scope\b/g, '.'+scope)}`}
</div>`;

  let value = [], changed = false;
  Object.defineProperty(dom, 'value', {
    get: () => [...value],
    set: ([a, b]) => {
      value = sanitize(a, b);
      updateRange();
    },
  });

  const sanitize = (a, b) => {
    a = isNaN(a) ? min : ((input.value = a), input.valueAsNumber);
    b = isNaN(b) ? max : ((input.value = b), input.valueAsNumber);
    return [Math.min(a, b), Math.max(a, b)];
  }
  
  const updateRange = () => {
    const ratio = v => (v - min) / (max - min);
    dom.style.setProperty('--range-min', `${ratio(value[0]) * 100}%`);
    dom.style.setProperty('--range-max', `${ratio(value[1]) * 100}%`);
  };

  const dispatch = name => {
    dom.dispatchEvent(new Event(name, {bubbles: true}));
  };
  const setValue = (vmin, vmax) => {
    const [pmin, pmax] = value;
    value = sanitize(vmin, vmax);
    updateRange();
    // Only dispatch if values have changed.
    if(pmin === value[0] && pmax === value[1]) return;
    dispatch('input');
    changed = true;
  };
  
  setValue(...defaultValue);
  
  // Mousemove handlers.
  const handlers = new Map([
    [controls.min, (dt, ov) => {
      const v = clamp(min, ov[1], ov[0] + dt * (max - min));
      setValue(v, ov[1]);
    }],
    [controls.max, (dt, ov) => {
      const v = clamp(ov[0], max, ov[1] + dt * (max - min));
      setValue(ov[0], v);
    }],
    [controls.range, (dt, ov) => {
      const d = ov[1] - ov[0];
      const v = clamp(min, max - d, ov[0] + dt * (max - min));
      setValue(v, v + d);
    }],
  ]);
  
  // Returns client offset object.
  const pointer = e => e.touches ? e.touches[0] : e;
  // Note: Chrome defaults "passive" for touch events to true.
  const on  = (e, fn) => e.split(' ').map(e => document.addEventListener(e, fn, {passive: false}));
  const off = (e, fn) => e.split(' ').map(e => document.removeEventListener(e, fn, {passive: false}));
  
  let initialX, initialV, target, dragging = false;
  function handleDrag(e) {
    // Gracefully handle exit and reentry of the viewport.
    if(!e.buttons && !e.touches) {
      handleDragStop();
      return;
    }
    dragging = true;
    const w = controls.zone.getBoundingClientRect().width;
    e.preventDefault();
    handlers.get(target)((pointer(e).clientX - initialX) / w, initialV);
  }
  
  
  function handleDragStop(e) {
    off('mousemove touchmove', handleDrag);
    off('mouseup touchend', handleDragStop);
    if(changed) dispatch('change');
  }
  
  invalidation.then(handleDragStop);
  
  dom.ontouchstart = dom.onmousedown = e => {
    dragging = false;
    changed = false;
    if(!handlers.has(e.target)) return;
    on('mousemove touchmove', handleDrag);
    on('mouseup touchend', handleDragStop);
    e.preventDefault();
    e.stopPropagation();
    
    target = e.target;
    initialX = pointer(e).clientX;
    initialV = value.slice();
  };
  
  controls.track.onclick = e => {
    if(dragging) return;
    changed = false;
    const r = controls.zone.getBoundingClientRect();
    const t = clamp(0, 1, (pointer(e).clientX - r.left) / r.width);
    const v = min + t * (max - min);
    const [vmin, vmax] = value, d = vmax - vmin;
    if(v < vmin) setValue(v, v + d);
    else if(v > vmax) setValue(v - d, v);
    if(changed) dispatch('change');
  };
  
  return dom;
}

function randomScope(prefix = 'scope-') {
  return prefix + (performance.now() + Math.random()).toString(32).replace('.', '-');
}

cssLength = v => v == null ? null : typeof v === 'number' ? `${v}px` : `${v}`

html = htl.html

theme_Flat = `
/* Options */
:scope {
  color: #3b99fc;
  width: 240px;
}

:scope {
  position: relative;
  display: inline-block;
  --thumb-size: 15px;
  --thumb-radius: calc(var(--thumb-size) / 2);
  padding: var(--thumb-radius) 0;
  margin: 2px;
  vertical-align: middle;
}
:scope .range-track {
  box-sizing: border-box;
  position: relative;
  height: 7px;
  background-color: hsl(0, 0%, 80%);
  overflow: visible;
  border-radius: 4px;
  padding: 0 var(--thumb-radius);
}
:scope .range-track-zone {
  box-sizing: border-box;
  position: relative;
}
:scope .range-select {
  box-sizing: border-box;
  position: relative;
  left: var(--range-min);
  width: calc(var(--range-max) - var(--range-min));
  cursor: ew-resize;
  background: currentColor;
  height: 7px;
  border: inherit;
}
/* Expands the hotspot area. */
:scope .range-select:before {
  content: "";
  position: absolute;
  width: 100%;
  height: var(--thumb-size);
  left: 0;
  top: calc(2px - var(--thumb-radius));
}
:scope .range-select:focus,
:scope .thumb:focus {
  outline: none;
}
:scope .thumb {
  box-sizing: border-box;
  position: absolute;
  width: var(--thumb-size);
  height: var(--thumb-size);

  background: #fcfcfc;
  top: -4px;
  border-radius: 100%;
  border: 1px solid hsl(0,0%,55%);
  cursor: default;
  margin: 0;
}
:scope .thumb:active {
  box-shadow: inset 0 var(--thumb-size) #0002;
}
:scope .thumb-min {
  left: calc(-1px - var(--thumb-radius));
}
:scope .thumb-max {
  right: calc(-1px - var(--thumb-radius));
}
`

Plot = import("https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm")

// load and authorize redivis
redivis = require("redivis")
//auth = redivis.authorize({ apiToken: REDIVIS_API_TOKEN })

// formatting function for how two ended slider displays selected range
interval_format = ([start, end]) => `[${start}, ${end}]`

// array of seasons for season selector
seasons = ["spring", "summer", "fall", "winter"]

// all segments
s = transpose(segments)

// all segments' data
d = transpose(data).map(d => ({ ...d, time: new Date(d.time) }))

ns = Inputs.text().classList[0]

// custom css to override some ojs defaults for inputs
html`<style>

  .${ns} {
    --label-width: 70px;
  }

  .${ns} div label {
    background-color: #f4f4f4;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    margin-right: 0.25rem;
    width: auto;
  }
  
  .${ns} div label:hover,
  .${ns} div label:active,
  .${ns} div label:focus {
    background-color: #cdecff;
  }
  
  .${ns} div input[type="number"] {
    background-color: #f4f4f4;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    flex-shrink: 3;
    border: none;
  }
  
  .${ns} select {
    background-color: #f4f4f4;
    border: none;
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    width: auto;
  }
  
}
</style>`

Use these filters to narrow down the list of segments, and then select an individual segment from this list below to visualize its trajectory and telemetry.

// filter by season(s)
viewof season = Inputs.checkbox(seasons, {value: seasons, label: "Season (astronomical, northern hemisphere)"})

// filter by range of longitudes
viewof longitude_range = interval([-180, 180], {
  step: 1, label: "Longitudes", width: "80%", format: interval_format
})

// filter by range of latitudes
viewof latitude_range = interval([-90, 90], {
  step: 1, label: "Latitudes", width: "80%", format: interval_format
})

// filter by range of durations
viewof duration_range = interval([0, 100], {
  step: 1, label: "Duration (days)", width: "80%", format: interval_format
})

function download(filename, text) {
  var element = document.createElement("a");
  element.setAttribute(
    "href",
    "data:text/csv;charset=utf-8," + encodeURIComponent(text)
  );
  element.setAttribute("download", filename);

  element.style.display = "none";
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

// callback helper -- array to csv
function convertToCSV(arr) {
  const array = [Object.keys(arr[0])].concat(arr);

  return array
    .map((it) => {
      return Object.values(it).toString();
    })
    .join("\n");
}

// download data button
download_button = {
  let button = Inputs.button(html`Download ${sf.length} segment${sf.length != 1 ? "s" : ""} (downsampled)`);
  button.addEventListener("click", function () {
    download("project_loon_filtered.csv", convertToCSV(df));
  });
  return button;
}

function fillTemplate(template, values) {
  return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
    return values[key] !== undefined ? values[key] : match;
  });
};

function generateSeasonCondition(seasons) {
  if (!seasons || seasons.length === 0) {
    return '';
  }
  return seasons.map(season => `segments.${season}`).join(' OR ');
}

// read in template files
sql_template = FileAttachment("resources/templates/query.sql").text();
r_template = FileAttachment("resources/templates/query_snippet.R").text();
py_template = FileAttachment("resources/templates/query_snippet.py").text();

// create sql query using input filter values, indent all lines
sql_query = fillTemplate(sql_template, {
  longitude_min: longitude_range[0],
  longitude_max: longitude_range[1],
  latitude_min: latitude_range[0],
  latitude_max: latitude_range[1],
  duration_min: duration_range[0],
  duration_max: duration_range[1],
  season_statement: generateSeasonCondition(season)
}).replace(/^/gm, '  ');


// create r and python code snippets with sql query
r_snippet = () => fillTemplate(r_template, { query: sql_query });
py_snippet = () => fillTemplate(py_template.trim(), { query: sql_query });

// modified from:
// https://github.com/jimjam-slam/quarto-experiments/tree/main/modal-dialog

html`
<a href="#" data-micromodal-trigger="mymodal" tabindex="0">
  <i class="bi bi-clipboard-data"></i>
  Generate code snippet
</a>
`

micro = require("micromodal@0.4.10");
m = micro.init({
  awaitOpenAnimation: true,
  awaitCloseAnimation: true
});

Data query code snippet

R

html`
<div class="sourceCode">
<pre class="sourceCode r code-with-copy">
<code class="sourceCode r">
<span>${r_snippet()}</span>
</code>
<button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button>
</pre>
</div>
`

Python

html`
<div class="sourceCode">
<pre class="sourceCode python code-with-copy">
<code class="sourceCode python">
<span>${py_snippet()}</span>
</code>
<button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button>
</pre>
</div>
`

sf = s.filter(d => season.some(se => d.season.includes(se))) // by season
      .filter(d => d.longitude_min >= longitude_range[0] & // by longitude
                   d.longitude_max <= longitude_range[1])
      .filter(d => d.latitude_min >= latitude_range[0] & // by latitude
                   d.latitude_max <= latitude_range[1])
      .filter(d => d.duration >= duration_range[0] & // by duration
                   d.duration <= duration_range[1])

// filtered segments' IDs
sf_id = sf.map(d => d.segment_id)

// filtered segments' data
df = d.filter(d => sf_id.includes(d.segment_id))

land = FileAttachment("resources/topo/ne_110m_land.json").json()
ocean = FileAttachment("resources/topo/ne_110m_ocean.json").json()

// fill colors for land and ocean on maps
land_color = "wheat"
ocean_color = "#8398aa"

// map -- globe
viewof map_globe = Plot.plot({
  width: 400,
  projection: {type: "orthographic", rotate: [-longitude, -latitude]},
  marks: [
    Plot.sphere(),
    Plot.graticule(),
    Plot.geo(ocean, {fill: ocean_color, opacity: 0.7}),
    Plot.geo(land, {fill: land_color}),
    Plot.line(df, {
      x: "longitude", y: "latitude", z: "segment_id",
      r: 0.7, stroke: "grey", strokeOpacity: 0.7,
    }),
    Plot.tip(df, Plot.pointer({
      x: "longitude", y: "latitude", title: (d) => d.segment_id,
      format: (d) => `${d}`, textPadding: 4,
    }))
  ]
})

viewof longitude = Inputs.range([-180, 180], {label: "Longitude", step: 1, value: -30})
viewof latitude = Inputs.range([-90, 90], {label: "Latitude", step: 1, value: 0})

---

d_found = sf.length > 0
// display error is no matches
d_found ? html`<div></div>` : html`<p class="filter-error"><i class="bi bi-exclamation-triangle"></i> No segments match selected filters</p>`
dg = d3.group(df, d => d.segment_id)
// selector for individual segment
viewof ds = Inputs.select(dg, {
  value: dg.get(112), // default segment
  format: ([k, v]) => `Segment ${k} (Flight ${v[0].flight_id})`
})

async function getSegment(seg_id) {
  const rows = await redivis
    .user('SDSS')
    .dataset('project_loon')
    .query(`
       SELECT *
       FROM loon
       WHERE segment_id = ${seg_id}
    `)
    .listRows()
  return rows;
}

viewof download_button_segment = {
  let button = Inputs.button("Download segment");
  button.addEventListener("click", async function () {
    const df_full = await getSegment(ds[0].segment_id);
    download("project_loon_filtered.csv", convertToCSV(df_full));
  });
  return button;
}

d_found ? html`<div class="segment-buttons">${viewof ds} ${viewof download_button_segment}</div>` : html`<div></div>`
start_color = "var(--bs-success)"
end_color = "var(--bs-danger)"

// function for how to format data on map
print_date = d => d.toISOString().split('T')[0]

// map -- whole world equirectangular
d_found ? Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  projection: { type: "equirectangular" },
  marks: [
    Plot.frame(),
    Plot.graticule(),
    Plot.geo(ocean, {fill: ocean_color, opacity: 0.7}),
    Plot.geo(land, {fill: land_color}),
    // trajectory path
    Plot.line(ds, {
      x: "longitude", y: "latitude",
      r: 1, stroke: "black", strokeOpacity: 0.3,
    }),
    // start marker
    Plot.dot(ds.slice(0, 1), {
      x: "longitude", y: "latitude",
      r: 3, fill: start_color, symbol: "triangle"
    }),
    // start date text
    Plot.text(ds.slice(0, 1), {
      x: "longitude", y: "latitude",
      text: d => print_date(d.time), dy: -7, lineAnchor: "bottom", fontSize: 14
    }),
    // end marker
    Plot.dot(ds.slice(ds.length - 1, ds.length), {
      x: "longitude", y: "latitude",
      r: 3, fill: end_color, symbol: "square"
    }),
    // end date text
    Plot.text(ds.slice(ds.length - 1, ds.length), {
      x: "longitude", y: "latitude",
      text: d => print_date(d.time), dy: -7, lineAnchor: "bottom", fontSize: 14
    })
  ],
}) : html`<div></div>`
get_circle = (seg) => {
  // find min and max longitude and latitude
  const minLon = d3.min(seg.map(d => d.longitude))
  const maxLon = d3.max(seg.map(d => d.longitude))
  const minLat = d3.min(seg.map(d => d.latitude))
  const maxLat = d3.max(seg.map(d => d.latitude))
  // define rectangle with min/max long/lat corners
  const corners = [[minLon, minLat], [minLon, maxLat], [maxLon, minLat], [maxLon, maxLat]]
  // find rectangle's center
  const center = [(minLon + maxLon) / 2, (minLat + maxLat) / 2]
  // find max of geo distances from each corner to center
  const dist = d3.max(corners, corner => d3.geoDistance(center, corner))
  // turn geo distance into radius
  const radius = dist * (180 / Math.PI)
  // define geo circle with computed center and radius
  const circle = d3.geoCircle().center(center).radius(radius)()
  return circle
}

// find above circle
circle = d_found ? get_circle(ds) : null

// map -- zoomed in azimuthal
d_found ? Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  projection: { type: "azimuthal-equidistant", domain: circle },
  marks: [
    Plot.frame(),
    Plot.graticule(),
    Plot.geo(ocean, {fill: ocean_color, opacity: 0.7}),
    Plot.geo(land, {fill: land_color}),
    // trajectory path
    Plot.line(ds, {
      x: "longitude", y: "latitude",
      r: 1, stroke: "black", strokeOpacity: 0.3,
    }),
    // start marker
    Plot.dot(ds.slice(0, 1), {
      x: "longitude", y: "latitude",
      r: 6, fill: start_color, symbol: "triangle"
    }),
    // start date text
    Plot.text(ds.slice(0, 1), {
      x: "longitude", y: "latitude",
      text: d => print_date(d.time), dy: -8, lineAnchor: "bottom", fontSize: 14
    }),
    // end marker
    Plot.dot(ds.slice(ds.length - 1, ds.length), {
      x: "longitude", y: "latitude",
      r: 6, fill: end_color, symbol: "square"
    }),
    // end date text
    Plot.text(ds.slice(ds.length - 1, ds.length), {
      x: "longitude", y: "latitude",
      text: d => print_date(d.time), dy: -8, lineAnchor: "bottom", fontSize: 14
    })
  ],
}) : html`<div></div>`
viewof scatter_altitude = Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  width: 900,
  height: 200,
  inset: 8,
  grid: true,
  y: { label: "Altitude (meters)" },
  marks: [
    Plot.frame(),
    Plot.dot(ds, { x: "time", y: "altitude", r: 0.5 }),
  ]
})

d_found ? html`
  <form><label>Altitude</label></form>
  ${viewof scatter_altitude}
` : html`<div></div>`
winds = new Map([["Zonal (east-west)", "wind_u"],
                 ["Meridional (north-south)", "wind_v"]])
viewof y_wind = Inputs.select(winds, {label: "Wind"})

viewof scatter_wind = Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  width: 900,
  height: 200,
  inset: 8,
  grid: true,
  y: { label: "Velocity (meters/second)" },
  marks: [
    Plot.frame(),
    Plot.dot(ds, { x: "time", y: y_wind, r: 0.5 }),
  ]
})

d_found ? html`
  ${viewof y_wind}
  ${viewof scatter_wind}
` : html`<div></div>`
fluxes = new Map([["Total", "flux_total"],
                  ["Eastward", "flux_east"],
                  ["Westward", "flux_west"],
                  ["Northward", "flux_north"],
                  ["Southward", "flux_south"]])
viewof y_flux = Inputs.select(fluxes, {label: "Flux"})

viewof scatter_flux = Plot.plot({
  style: { fontFamily: "var(--sans-serif)" },
  width: 900,
  height: 200,
  inset: 8,
  grid: true,
//  y: { label: "Flux (millipascals)", transform: (f) => Math.abs(f * 1000) },
  y: { label: "Flux (log mPa)", transform: (f) => Math.log(Math.abs(f * 1000)) },
  marks: [
    Plot.frame(),
    Plot.dot(ds, { x: "time", y: y_flux, r: 0.5 }),
  ]
})

d_found ? html`
  ${viewof y_flux}
  ${viewof scatter_flux}
` : html`<div></div>`
// data table for selected segment's data
d_found ? Inputs.table(ds) : html`<div></div>`